<template>
    <div class="inspector-information-table-content" :class="!isMobile?'is-mobile-information-table-content':''">
        <div :class="!isMobile?'is-mobile-box-v-information':''">
            <div style="background: #fff;z-index: 99;padding-top: 10px;">
                <div style="display: flex;justify-content: center;margin: 10px 0 0 0;">
                    <h2>审评查验中心审评员遴选</h2>
                </div>
            </div>
            <!-- <div style="margin-top: 117px;"></div> -->
            <div class="inspector-information-bottom-v">
                <div class="inspector-registration-first-step">
                    <div class="inspector-table-from-d table-from-d-car" >
                        <div class="inspector-table-text table-text-car">

                            <span class="table-text-s"><span class="inspector-asterisk-v first-asterisk-v">*</span>身份证号</span>
                            <span>：</span>
                        </div>
                        <div class="right-content-v" >
                            <a-form ref="form" :form="form">
                                <a-form-item >
                                    <a-input
                                    @change="idCardChange"
                                    style="width: 100%;"
                                    v-model:value="firstStepData.fsfzh"
                                    v-decorator="['fsfzh',{ initialValue:firstStepData.fsfzh, rules: rules.fsfzh}]"
                                    placeholder="请输入身份证号码"
                                    :maxLength="18"
                                    />
                                </a-form-item>
                            </a-form>
                            <!-- <a-input style="width: 100%;" v-model:value="fsfzh" placeholder="请输入身份证号码" /> -->
                        </div>
                    </div>
                    <div class="inspector-table-from-d table-from-d-car" v-if="isCard">
                        <div class="inspector-table-text table-text-car">

                            <span class="table-text-s"><span class="inspector-asterisk-v first-asterisk-v">*</span>手机号码</span>
                            <span>：</span>
                        </div>
                        <div class="right-content-v" >
                            <a-form ref="form" :form="form">
                                <a-form-item >
                                    <a-input
                                    style="width: 100%;"
                                    @change="phoneChange"
                                    v-model:value="firstStepData.phone"
                                    v-decorator="['phone',{ initialValue:firstStepData.phone, rules: rules.phone}]"
                                    placeholder="请输入手机号码"
                                    />
                                </a-form-item>
                            </a-form>
                            <!-- <a-input style="width: 100%;" v-model:value="fsfzh" placeholder="请输入身份证号码" /> -->
                        </div>
                    </div>
                    <div class="inspector-table-from-d table-from-d-car" v-if="isCode">
                        <div class="inspector-table-text table-text-car">

                            <span class="table-text-s"><span class="inspector-asterisk-v first-asterisk-v">*</span>验证码</span>
                            <span>：</span>
                        </div>
                        <div class="right-content-v" >
                            <a-form ref="form" :form="form">
                                <a-form-item >
                                    <a-input
                                    style="width: 64%;"
                                    v-model:value="firstStepData.code"
                                    v-decorator="['code',{ initialValue:firstStepData.code, rules: rules.code}]"
                                    placeholder="请输入验证码"
                                    />
                                    <a-button
                                        class="inspector-table-code-btn-box"
                                        size="small"
                                        :type="!totalSeconds?'primary':''"
                                        @click.stop.prevent="getCode(hourString,minuteString,secondString)">
                                        <span class="code-text" v-if="!totalSeconds">{{codeText}}</span>
                                        <span class="code-text" v-if="hourString == '00' && minuteString == '00' && secondString == '00' && totalSeconds && !isGetCode ">重新获取</span>
                                        <span class="code-text text-color" v-if="hourString !== '00'">{{hourString+'：'+minuteString+'：'+secondString}}</span>
                                        <span class="code-text text-color" v-else-if="minuteString !== '00'">{{minuteString+'：'+secondString}}</span>
                                        <span class="code-text text-color" v-else-if="secondString !== '00'">{{secondString}}</span>
                                    </a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                    </div>
                    <div v-if="isCode" style="text-align: center;color: #999;">（注：验证码有效时长为30分钟）</div>
                    <div v-if="isCode" style="display: flex;justify-content: center;margin-top: 30px;">
                        <a-button class="blue-btn" type="primary" @click="nextStep">下一步</a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    jcylxdjcjverifyJcydjb,
    spcyJcydjbgetPhoneBySfzh,
    spcyJcydjbsendYzm,
} from './service/index'
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import validator from '@/common/validator'
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
    },
    props:{

    },

    data(){
        return{
            windowWidth: window.innerWidth,
            emailSuffix:'qq.com',
            eSuffixList:['qq.com','163.com','126.com','gmail.com','sina.com','hotmail.com','icloud.com'],
            firstStepData:{
                fsfzh:'',
                code:'',
                phone:'',
            },
            YchConstant:YchConstant,
            moment:moment,
            form: this.$form.createForm(this, { name: 'fromName' }),
            rules:{
                fsfzh: [{
                    required: true,
                    message: '请输入身份证号',
                    // trigger: 'blur',
                },{
                    pattern: validator.isIdCard.reg,
                    message: '请输入正确的身份证号',
                    // trigger: 'blur',
                }],
                phone: [{
                    required: true,
                    message: '请输入手机号码',
                    // trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号码',
                    // trigger: 'blur',
                }],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    // trigger: 'blur',
                }]
            },
            fsfzh:'',
            djbData:{},
            djbId:this.$route.query.djbId,
            compSelectorkey:null,
            formField:{},
            lbValue:[],
            jobResumeList:[{
                fgzkssj:'',
                fgzjssjstr:'',
                fgzdw:'',
                fcsgz:'',
                fzw:'',
            }],
            publishList:[{
                ffbsj:'',
                fqkmc:'',
                fwzmc:'',
            }],
            isCard:false,
            isCode:false,
            codeText:'获取验证码',
            totalSeconds:null,//总秒数
            hour:0,
            minute:0,
            second:0,
            timer: '',
            isGetCode:false,
            lbListKey:null,
            jobResumeListKey:null,
            validateArr:[],
            validateIdData:[
            'realname','sex','fmz','fzzmm','fxl','fzc','fzw','fbyyx','fsxzy',
            'fcsgz','fgzdw','fgznx','fgzdwdz','phone','fqqhm','email'
            ],//,'lbId','jobResId','fdwyj'
            currentId:'',
            currentIdKey:null,
            flxjhid:'',
            isMobile:false,
        }
    },
    watch:{

    },
    mounted(){
        if(this.$route.query.flxjhid){
            this.flxjhid = this.$route.query.flxjhid
        }
        window.addEventListener('resize', this.handleResize);
    },
    computed:{
        hourString () {
            return this.formatNum(this.hour)
        },
        minuteString () {
            return this.formatNum(this.minute)
        },
        secondString () {
            return this.formatNum(this.second)
        }
    },
    methods:{
        handleResize(){
            this.windowWidth = window.innerWidth;
            if (window.innerWidth <= 768) {
                this.isMobile = true;
            } else {
                this.isMobile = false;
            }
        },
        idCardChange(){
            //console.log('验证中',this.firstStepData.fsfzh)
            var isIdCard = validator.isIdCard.reg
            if(isIdCard.test(this.firstStepData.fsfzh)){
                spcyJcydjbgetPhoneBySfzh({fsfzh:this.firstStepData.fsfzh,flxjhid:this.flxjhid,}).then(res=>{
                    if(res.code == 200){
                        //console.log(res)
                        if(res.result){
                            this.firstStepData.phone = res.result
                            this.form.setFieldsValue({
                                phone:res.result,
                            });
                            this.isCode = true
                        }

                    }else{
                        this.$message.warning(res.message)
                    }
                })
                this.isCard = true
            }else{
                this.firstStepData.phone = ''
                this.form.setFieldsValue({
                    phone:'',
                });
                this.isCard = false
                this.isCode = false
            }
        },
        phoneChange(){
            var isPhone = validator.isPhone.reg
            if(isPhone.test(this.firstStepData.phone)){
                this.isCode = true
            }else{
                this.isCode = false
            }
        },
        //获取验证码
        getCode(){
            if(this.isGetCode && this.second){
              return false
            }
            this.form.validateFields(['fsfzh', 'phone'], { force: true }, (err, values) => {
                //console.log(err)
              if (!err) {
                let loginParams = {
                    fsfzh:values.fsfzh,
                    phone:values.phone,
                    flxjhid:this.flxjhid,
                }
                //console.log(loginParams)
                spcyJcydjbsendYzm(loginParams).then(res=>{
                    if(res.code == 200){
                        this.totalSeconds = 60
                        if (this.totalSeconds > 0) {
                            this.second = this.totalSeconds
                            this.countDowm()
                        }
                        this.isGetCode = true
                        this.firstStepData.code = 3781
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
              }
            })
        },
        countDowm () {
            var self = this
            clearInterval(this.timer)
            this.timer = setInterval(function () {
            if (self.hour === 0) {
                if (self.minute === 0 && self.second === 1){
                  self.isGetCode = false
                }
                if (self.minute !== 0 && self.second === 0) {
                  self.second = 59
                  self.minute -= 1
                } else if (self.minute === 0 && self.second === 0) {
                  self.second = 0
                  // self.$emit('countDowmEnd', true)
                  clearInterval(self.timer)
                } else {
                  self.second -= 1
                }

            } else {
                if (self.minute !== 0 && self.second === 0) {
                self.second = 59
                self.minute -= 1
                } else if (self.minute === 0 && self.second === 0) {
                self.hour -= 1
                self.minute = 59
                self.second = 59
                } else {
                self.second -= 1
                }
            }
            }, 1000)
        },
        formatNum (num) {
            return num < 10 ? '0' + num : '' + num
        },
        nextStep(){//下一步
            //console.log(7777,this.form)
            this.form.validateFields(['code'], { force: true }, (err, values) => {
                //console.log(err)
                if (!err) {
                    this.getId()
                }
            })

        },
        getId(){
            //console.log(8888)
            jcylxdjcjverifyJcydjb({fsfzh:this.firstStepData.fsfzh,code:this.firstStepData.code,flxjhid:this.flxjhid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result.djb.id)
                    var a = document.createElement('a');
                    a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'selectionRegistrationSelectType?id='+res.result.djb.id+'&flxjhid='+this.flxjhid
                    a.click();
                }else{
                    this.$message.warning(res.message)
                }
            })
        }
    }
}
</script>
<style lang="less">
.inspector-information-table-content{
    // height: calc(100vh - 40px);
    // margin: 10px 0;
    // overflow-y: auto;
    overflow: hidden;
    .ant-steps-item-title{
        font-size:18px;
    }
    .inspector-information-bottom-v{
        height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .inspector-info-step-v{
        margin: 0 10px;
        .ant-steps{
            display: flex;
        }
        .ant-steps-item-active::before{
            width: 0 !important;
            height: 0 !important;
        }
        .ant-steps-item-container{
            padding-bottom: 0;
        }
        .ant-steps-item::after{
            top: -9px;
            left: 90%;
            transform: rotate(45deg);
        }
        .ant-steps-item-icon {
            float: left;
            margin-right: 8px;
        }
        .ant-steps-item-content{
            min-height: 30px;
        }
    }
    .inspector-registration-first-step{
        margin: 10px 0;
        margin-top: 50px;
    }
    .inspector-table-from-d{
        margin:10px;
        display: flex;
        align-items: center;
        .inspector-asterisk-v{
            color:#f5222d;
            font-size: 24px;
            display: flex;
            width: 6px;
            height: 16px;
            line-height: 21px;
        }
        .inspector-table-text{
            display: flex;
            align-items: center;
            .table-text-s{
                font-weight: 500;
                text-align: right;
                display: flex;
                justify-content: flex-end;
                width: 82px;
                font-size:18px;
                .inspector-asterisk-v{
                    padding-right: 10px;
                    line-height:27px;
                }
                .first-asterisk-v{
                    line-height: 50px;
                }
            }
        }

        .left-text-v{

        }
        .right-content-v{
            flex: 1;
            font-size:18px;
            .inspector-table-code-btn-box{
                height: 32px;
                width: 88px;
            }
        }
        .email-suffix-v{
            display: flex;
            align-items: center;
        }


    }
    .table-from-d-car{
        align-items: flex-start;
        .table-text-car{
            height: 40px;
            line-height: 40px;
        }
    }

    .itable-large-area{
        margin: 10px;
        .text-xfl{
            font-weight: 600;
            display: flex;
            .inspector-asterisk-v{
                color:#f5222d;
                padding-right: 15px;
                font-size: 24px;
                display: flex;
                width: 6px;
                height: 16px;
                line-height: 29px;
            }
        }
        .itable-content-v{
            margin: 0 10px;
            font-size:18px;
            .ant-checkbox-wrapper{
                font-size:18px;
            }
            .ant-checkbox-disabled + span {
                color: rgba(0, 0, 0, 0.65);
            }
        }
    }
    .ant-input-disabled{
        background: #fff;
        color: rgba(0, 0, 0, 0.65);
    }
    .lb-list-checkbox{
        display: flex;
        align-items: flex-start;
        .ant-checkbox{
            margin-top: 7px;
        }
        .lb-type-list-v{
            .ant-checkbox{
                margin-top: 0px;
            }
        }
    }
    .a-select-option{
        font-size:18px
    }
}
.is-mobile-information-table-content{
        display: flex;
        justify-content: center;
        background-color: #f0f2f5;
    .is-mobile-box-v-information{
        width: 500px;
        background-color: #fff;
        margin: 8px 0;
        height: calc(100vh - 16px);
        box-shadow: 0px 0px 11px rgba(158, 188, 229, 0.8);
        overflow: auto;
    }
}
</style>
